<template>
  <view>
    <view class="code-flex-col group_10">
      <text class="code-self-start font_5 text_13">购票须知</text>
      <view class="grid">
        <view class="code-flex-col code-relative grid-item">
          <view class="code-flex-row code-items-center">
            <view class="section_5"></view>
            <text class="code-ml-6 font_3">限购规则</text>
          </view>
          <text class="font_4 mt-9">
            每笔订单最多购买{{ activityDetails.activityServeBo.buyAccountInfo }}张、每每个账号最多购买{{
              activityDetails.activityServeBo.buyAccountMax
            }}次
          </text>
        </view>
        <view class="code-flex-col code-relative grid-item">
          <view class="code-flex-row code-items-center">
            <view class="section_5"></view>
            <text class="font_3 ml-5">退票/换票规则</text>
          </view>
          <text class="font_4 mt-9">本项目支持{{ activityDetails.actServe }}</text>
        </view>
        <view class="code-flex-col code-relative grid-item">
          <view class="code-flex-row code-items-center">
            <view class="section_5"></view>
            <text class="font_3 ml-5">入场规则</text>
          </view>
          <text class="font_4 mt-9">{{ activityDetails.activityServeBo.buyEnterInfo }}</text>
        </view>
        <view class="code-flex-col code-relative grid-item">
          <view class="code-flex-row code-items-center">
            <view class="section_5"></view>
            <text class="font_3 ml-5">儿童购票</text>
          </view>
          <text class="font_4 mt-9">{{ activityDetails.activityServeBo.buyChildInfo }}</text>
        </view>
        <view class="code-flex-col code-relative grid-item">
          <view class="code-flex-row code-items-center">
            <view class="section_5"></view>
            <text class="font_3 ml-5">发票说明</text>
          </view>
          <text class="font_4 mt-9 line-clamp-1">演出开始前,去订票详情开具...</text>
        </view>
        <view class="code-flex-col code-relative grid-item">
          <view class="code-flex-row code-items-center">
            <view class="section_5"></view>
            <text class="font_3 ml-5">实名制购票规则</text>
          </view>
          <text class="font_4 mt-9 line-clamp-1">{{ activityDetails.activityServeBo.buyIdentityInfo }}.</text>
        </view>
      </view>
      <text class="code-self-center font_4 text_14" @tap="viewDetails">查看全部须知</text>
    </view>
    <view class="divider view_2"></view>
    <view class="code-flex-col group_11">
      <text class="code-self-start font_5 text_15">观演须知</text>
      <view class="code-flex-col code-self-stretch group_12 mt-11">
        <view class="code-flex-row">
          <view class="code-flex-col group_13 equal-division-item">
            <view class="code-flex-col code-self-stretch">
              <view class="code-flex-row code-items-center">
                <view class="section_5"></view>
                <text class="font_3 text_16 ml-5">演出时长</text>
              </view>
              <text class="font_4 text_17 mt-9">
                约{{ activityDetails.activityServeBo.seeMinute }}分钟（以现场为主）
              </text>
            </view>
            <view class="code-mt-22 code-flex-col code-self-stretch">
              <view class="code-flex-row code-items-center">
                <view class="section_5"></view>
                <text class="font_3 text_16 ml-5">最低演出曲目</text>
              </view>
              <text class="font_4 text_17 mt-9">约{{ activityDetails.activityServeBo.seeNum }}分钟（以现场为主）</text>
            </view>
            <view class="code-mt-22 code-flex-col code-self-stretch">
              <view class="code-flex-row code-items-center">
                <view class="section_5"></view>
                <text class="font_3 text_16 ml-5">禁止携带物品</text>
              </view>
              <text class="font_4 text_17 mt-9">
                {{ activityDetails.activityServeBo.seeErrorGoods }}
              </text>
            </view>
            <view class="code-mt-22 code-flex-col code-self-stretch">
              <view class="code-flex-row code-items-center">
                <view class="section_5"></view>
                <text class="font_3 text_16 ml-5">其他说明</text>
              </view>
              <text class="font_4 text_17 mt-9">
                {{ activityDetails.activityServeBo.seeOtherInfo }}
              </text>
            </view>
          </view>
          <view class="code-flex-col group_13 equal-division-item">
            <view class="code-flex-col code-self-stretch">
              <view class="code-flex-row code-items-center">
                <view class="section_5"></view>
                <text class="font_3 text_16 ml-5">入场时间</text>
              </view>
              <text class="font_4 mt-9">请于演出前约{{ activityDetails.activityServeBo.seeIntoMinute }}分钟入场</text>
            </view>
            <view class="code-mt-22 code-flex-col code-self-stretch">
              <view class="code-flex-row code-items-center">
                <view class="section_5"></view>
                <text class="font_3 text_16 ml-5">最低演出时长</text>
              </view>
              <text class="font_4 text_17 mt-9">
                最低演出时长{{ activityDetails.activityServeBo.seeLeastMinute }}分钟
              </text>
            </view>
            <view class="code-mt-22 code-flex-col code-self-stretch">
              <view class="code-flex-row code-items-center">
                <view class="section_5"></view>
                <text class="font_3 text_16 ml-5">寄存说明</text>
              </view>
              <text class="font_4 text_17 mt-9">
                {{ activityDetails.activityServeBo.seeDepositInfo }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <NoticePopup v-model:show="show" :activityDetails="activityDetails" />
  </view>
</template>

<script lang="ts" setup>
import { useActivtiesStore } from '@/stores/activties';
import NoticePopup from './noticePopup.vue';

const activtiesStore = useActivtiesStore();

const { activityDetails } = storeToRefs(activtiesStore);

const show = ref(false);

const viewDetails = () => {
  show.value = true;
};
</script>

<style lang="scss" scoped>
.mt-11 {
  margin-top: 22rpx;
}

.mt-9 {
  margin-top: 18rpx;
}

.ml-5 {
  margin-left: 10rpx;
}

.group_11 {
  padding: 36rpx 0 32rpx;

  .font_5 {
    font-size: 24rpx;
    line-height: 22.06rpx;
    color: #171726;
  }

  .text_15 {
    margin-left: 40rpx;
    line-height: 22.64rpx;
  }

  .group_12 {
    .group_13 {
      flex: 1 1 375rpx;

      .section_5 {
        background-color: #e2e2eb;
        border-radius: 50%;
        width: 8rpx;
        height: 8rpx;
      }

      .font_3 {
        font-size: 28rpx;
        line-height: 25.6rpx;
        font-weight: 800;
        color: #171726;
      }

      .text_16 {
        line-height: 25.62rpx;
      }

      .text_18 {
        margin-left: 16rpx;
        line-height: 26.02rpx;
      }
    }

    .equal-division-item {
      padding: 8rpx 36rpx;
    }

    .section_6 {
      margin-top: -28rpx;
      padding: 42rpx 0 14rpx;
      background-color: #ffffff;

      .text-wrapper {
        margin: 0 40rpx;
        padding: 28rpx 0;
        background-color: #0064ff;
        border-radius: 40rpx;

        .text_19 {
          color: #ffffff;
          line-height: 21.98rpx;
        }
      }
    }

    .font_4 {
      font-size: 22rpx;
      font-weight: 300;
      color: #696975;
    }
  }
}

.mt-9 {
  margin-top: 18rpx;
}

.ml-5 {
  margin-left: 10rpx;
}

.group_10 {
  padding: 0 40rpx;

  .font_5 {
    font-size: 24rpx;
    line-height: 22.06rpx;
    color: #171726;
  }

  .text_13 {
    line-height: 22.34rpx;
  }

  .grid {
    margin-top: 8rpx;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
    column-gap: 48.84rpx;

    .grid-item {
      padding: 20rpx 0;

      .section_5 {
        background-color: #e2e2eb;
        border-radius: 50%;
        width: 8rpx;
        height: 8rpx;
      }

      .font_3 {
        font-size: 28rpx;
        line-height: 25.6rpx;
        font-weight: 800;
        color: #171726;
      }
    }
  }

  .font_4 {
    font-size: 24rpx;
    font-weight: 300;
    color: #696975;
  }

  .text_14 {
    margin-top: 24rpx;
    color: #00b8ff;
  }
}

.divider {
  background-color: #e2e2eb;
  height: 2rpx;
}

.view_2 {
  margin: 16rpx 40rpx 0;
}
</style>
